<template>
  <div class="my-nav-container-collection">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="content-img" @click="openModal(item.img)">
          <img :src="getAssetImage(item.img)" alt="" />
        </div>
        <div class="content-title" @click="showImage(item.img)">
          {{ item.title }}
        </div>
        <div class="contentlist">
          <img :src="getAssetImage(item.headImg)" alt="" />
          <div class="contentlist-name">{{ item.name }}</div>
          <div class="aixin">
            <i class="iconfont icon-dianzanaixin"></i>
            <span>{{ item.likes }}</span>
          </div>
        </div>
      </li>
      <li v-if="currentImage">
        <img :src="getAssetImage(currentImage)" alt="当前图片" />
      </li>
    </ul>
    <!-- 弹窗 -->
    <div v-if="isModalOpen" class="modal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <span class="close" @click="closeModal">&times;</span>

        <div class="container">
          <div class="left">
            <img src="./image/baby.webp" alt="弹框图片" class="left-img" />
          </div>

          <div class="right">
            <div class="right-top">
              <img class="touxiang" src="./image/1.webp" alt="头像" />
              <span>小红薯BF55332</span>
              <button  class="guanzhu">关 注</button>
            </div>

            <div class="biaoti">
              <div class="biaoti-container">
<<<<<<< HEAD
                <h2><strong>{{i}}</strong></h2>
=======
                <h2><strong>大标题</strong></h2>
>>>>>>> ae425818a8de012198afcde4ec30232a8c7aa9e6
                <h3>我是内容我是内容我是内容我是内容我是内容</h3>
              </div>
              <div class="location">
                <span>{{currentTime  }}</span>
                <span>{{ location  }}</span>
                <button>...</button>
              </div>
            </div>
            <hr class="divider" />  <!-- 添加分割线 -->
            <div class="container-bot">
              <input type="text" placeholder="说点什么...">
              <div class="icon-container">
                <i class="iconfont icon-aixin">189</i>
                <i class="iconfont icon-shoucang">47</i>
                <i class="iconfont icon-pinglun">1751</i>
                <i class="iconfont icon-31zhuanfa"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import { ref,onMounted } from "vue";

export default {
  setup() {
    const currentImage = ref("");
    const isModalOpen = ref(false);
    let currentTime = new Date();

    const getAssetImage = (imgsrc) => new URL(imgsrc, import.meta.url).href;
    const location = ref('正在获取位置...');

    const updateTime = () => {
      const now = new Date();
      currentTime.value = now.toLocaleString();
    };

    const getLocation = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const { latitude, longitude } = position.coords;
            location.value = `纬度: ${latitude}, 经度: ${longitude}`;
          },
          () => {
            location.value = '位置获取失败';
          }
        );
      } else {
        location.value = '不支持地理位置服务';
      }
    };



    const showImage = (img) => {
      currentImage.value = img; // 更新当前图片
      isModalOpen.value = true; // 打开模态框
    };
    const items = ref([
      {
        img: "./image/30.jpg",
        title: "标题1",
        headImg: "./image/30.jpg",
        name: "名字1",
        likes: 10,
        comments:[
          {
             
          }
        ]
      },
      {
        img: "./image/baby.webp",
        title: "标题2",
        headImg: "./image/baby.webp",
        name: "名字2",
        likes: 5,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/6.webp",
        name: "名字3",
        likes: 2,
      },
      {
        img: "./image/7.webp",
        title: "标题2",
        headImg: "./image/7.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/8.webp",
        title: "标题2",
        headImg: "./image/8.webp",
        name: "名字5",
        likes: 9,
      },
      {
        img: "./image/8.webp",
        title: "标题2",
        headImg: "./image/8.webp",
        name: "名字5",
        likes: 9,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字5",
        likes: 9,
      },
      {
        img: "./image/6.webp",
        title: "标题2",
        headImg: "./image/6.webp",
        name: "名字5",
        likes: 9,
      },
      {
        img: "./image/7.webp",
        title: "标题2",
        headImg: "./image/7.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },

      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },

      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 8,
      },
      // 更多项...
    ]);

    const openModal = (img) => {
      currentImage.value = img; // 更新当前图片
      isModalOpen.value = true; // 开启模态框
      console.log(currentImage.value);
    };
    const closeModal = () => {
      isModalOpen.value = false;
      currentImage.value = "";
    };
    onMounted(() => {
      updateTime();
      getLocation();
      setInterval(updateTime, 1000); // 每秒更新时间
    });
     
    return {
      items,
      currentImage,
      showImage,
      getAssetImage,
      openModal,
      closeModal,
      isModalOpen,
      currentTime,
      location,
    };
  },
};
</script>
<style scoped>
/* 图片框的样式 */

/* 弹框内容部分 */
/* .container-bot{
  margin-top: 450px;
  margin-left: 50px;

}
.container-bot input{
  width:200px;
} */


.container-bot {
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 子元素之间的间距 */
    margin-top: 500px;
}

.container-bot input {
    flex: 1; /* 使输入框占据剩余空间 */
    margin-right: 10px; /* 输入框与图标之间的间距 */
    width: 250px;
  
  
}

.icon-container {
    display: flex; /* 使图标容器也使用 flexbox */
    gap: 10px; /* 图标之间的间距 */
}

/* 弹框左边图像 */
.left {
 
  float: left;
}
.left-img {
  width: 350px;
  height: 550px;
}
/* 弹框右边 */
.right {
  float: left;
  width: 40%;
  height: 400px;
  position: relative;
}
.right-top {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  width: 400px;
  height: 80px;
  margin-left: 30px;
  margin-top: -40px;
  position: fixed;
}
.touxiang {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}
.right-top span {
  margin-right: 20px; /* 调整用户名和关注按钮之间的间距 */

}
.guanzhu {
  background-color: red;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  width: 96px;
  height: 32px;
  margin-left: 100px;
}
h2 {
  white-space: normal; /* 默认的换行模式 */
}
.biaoti{
  position: absolute;
  margin-left: 50px;
  margin-top: 40px;
}
.h3{
  width: 356px;
  height: 88px;
}
.biaoti-container{
  width: 350px;
  height: 200px;
}
/* 分割线 */
.divider {
    border: none;                /* 去掉默认边框 */
    height: 1px;                /* 设置高度 */
    width:900px;
    background-color: rgb(116, 114, 114);     /* 设置颜色 */
    margin-top: 300px;
    margin-left: 30px;
}





ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important; /* 每行4个 */
  gap: 16px; /* 项目间距 */
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  background-color: #fff; /* 每个项的背景色 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  overflow: hidden; /* 防止内容溢出 */
  transition: transform 0.3s, box-shadow 0.3s; /* 动画效果 */
}

li:hover {
  transform: translateY(-5px); /* 悬停时上移 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 悬停时增加阴影 */
}

.content-img {
  width: 100%; /* 图片宽度100% */
  height: auto; /* 自适应高度 */
  transition: box-shadow 0.3s;
}

.content-img img {
  width: 100%;
  height: auto;
}

.content-img:hover {
  box-shadow: 0 4px 10px grey;
}

.content-title {
  padding: 12px; /* 内边距 */
  font-size: 1.1em; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色 */
  text-overflow: ellipsis; /* 省略号 */
  overflow: hidden; /* 隐藏溢出 */
  white-space: nowrap; /* 不换行 */
}

.contentlist {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 8px 12px; /* 内边距 */
  background-color: #f9f5f5; /* 背景色 */
  border-top: 1px solid #eaeaea; /* 顶部边框 */
}

.contentlist img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.contentlist-name {
  margin-left: 8px; /* 名字与头像间距 */
  font-size: 0.9em; /* 字体大小 */
  color: #666; /* 字体颜色 */
}

.aixin {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-left: auto; /* 向右对齐 */
  font-size: 0.9em; /* 字体大小 */
  color: #999; /* 字体颜色 */
}

.iconfont {
  margin-right: 4px; /* 图标与文本间距 */
}

.modal {
  /* 弹窗样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(174, 172, 172, 0.5);
}
.modal-content {
  position: relative;
  width: 830px;
  height: 550px;
  background-color: #fff;
}
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: rgb(26, 25, 25);
  font-size: 24px;
  cursor: pointer;
}
</style>